<template>
	<view class="market-research-container" :style="containerStyle">
		<!-- 页面标题 -->
		<nav-bar title="市场调研" />

		<!-- 页面头部区域 -->
		<view class="page-header">
			<!-- 项目信息提示 -->
			<view v-if="projectId" class="project-info-bar">
				<view class="project-info-content">
					<view class="info-icon">📋</view>
					<view class="info-text">
						<text class="project-label">当前项目</text>
						<text class="project-name-text">{{ projectName }}</text>
					</view>
				</view>
			</view>

			<!-- 选项卡导航 -->
			<view class="tabs">
				<view class="tab" :class="{ active: activeTab === 'input' }" @tap="activeTab = 'input'">
					<view class="tab-content">
						<text class="tab-icon">📝</text>
						<text class="tab-text">信息录入</text>
					</view>
					<view class="tab-indicator" v-if="activeTab === 'input'"></view>
				</view>
				<view class="tab" :class="{ active: activeTab === 'result' }" @tap="activeTab = 'result'">
					<view class="tab-content">
						<text class="tab-icon">📊</text>
						<text class="tab-text">分析结果</text>
					</view>
					<view class="tab-indicator" v-if="activeTab === 'result'"></view>
				</view>
			</view>
		</view>

		<!-- 提示弹窗组件 -->
		<uni-popup ref="popup" type="center">
			<view class="tip-popup">
				<text class="popup-icon">💡</text>
				<text class="popup-content">{{ currentTipContent }}</text>
				<button class="popup-btn" @tap="popup?.close()">我知道了</button>
			</view>
		</uni-popup>
		<!-- 风险等级说明弹窗 - 使用uni-popup组件 -->
		<uni-popup ref="riskModalRef" type="bottom" :mask-click="true" background-color="#f0f0f0">
			<view class="risk-modal">
				<view class="modal-header">
					<text class="modal-title">风险等级说明</text>
					<text class="modal-close" @tap="closeRiskLevelModal">✕</text>
				</view>
				<view class="modal-body">
					<view class="risk-level-item" v-for="(config, index) in riskConfigs" :key="index">
						<view class="level-info" :style="{color: config.color}">
							<view class="level-dot"></view>
							<text class="level-text">{{ config.level }}</text>
						</view>
						<text class="level-advice">{{ config.advice }}</text>
						<text class="level-criteria">
							{{ index < riskConfigs.length - 1 ? `日均有效客流≥${config.minCustomers}人` : '日均有效客流<200人' }}
						</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 输入区域包装器 -->
		<scroll-view scroll-y class="input-sections" v-if="activeTab === 'input'">
			<!-- 周边小区信息卡片 -->
			<view class="section-card">
				<view class="section-header">
					<view class="icon-container">
						<text class="section-icon">🏘️</text>
					</view>
					<text class="section-title">周边小区信息</text>
					<text class="tip-icon" @tap="showTip('residential')">？</text>
				</view>
				<view class="input-group">
					<view class="input-field">
						<text class="field-label">周边小区数量 (个)</text>
						<input type="number" v-model="inputFormData.residentialComplexes" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入数量">
					</view>
					<view class="input-field">
						<text class="field-label">居民总人数 (人)</text>
						<input type="number" v-model="inputFormData.residentsCount" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入人数">
					</view>

					<view class="input-field">
						<text class="field-label">居民捕获率 (%)</text>
						<input type="number" v-model="inputFormData.residentialPenetration" class="form-input" min="0"
							max="100" step="0.1" @input="handleInputChange" placeholder="请输入比例">
					</view>
				</view>
			</view>

			<!-- 办公区域信息卡片 -->
			<view class="section-card">
				<view class="section-header">
					<view class="icon-container">
						<text class="section-icon">🏢</text>
					</view>
					<text class="section-title">办公区域信息</text>
					<text class="tip-icon" @tap="showTip('office')">？</text>
				</view>
				<view class="input-group">
					<view class="input-field">
						<text class="field-label">办公大楼数量 (栋)</text>
						<input type="number" v-model="inputFormData.officeBuildings" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入数量">
					</view>
					<view class="input-field">
						<text class="field-label">办公人员数量 (人)</text>
						<input type="number" v-model="inputFormData.officeWorkers" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入人数">
					</view>
					<view class="input-field">
						<text class="field-label">办公人员捕获率 (%)</text>
						<input type="number" v-model="inputFormData.officePenetration" class="form-input" min="0"
							max="100" step="0.1" @input="handleInputChange" placeholder="请输入比例">
					</view>
				</view>
			</view>

			<!-- 娱乐与会所信息卡片 -->
			<view class="section-card">
				<view class="section-header">
					<view class="icon-container">
						<text class="section-icon">🎭</text>
					</view>
					<text class="section-title">娱乐与会所信息</text>
					<text class="tip-icon" @tap="showTip('entertainment')">？</text>
				</view>
				<view class="input-group">
					<view class="input-field">
						<text class="field-label">娱乐场所数量 (个)</text>
						<input type="number" v-model="inputFormData.entertainmentVenues" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入数量">
					</view>
					<view class="input-field">
						<text class="field-label">日均顾客流量 (人)</text>
						<input type="number" v-model="inputFormData.entertainmentCustomers" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入人数">
					</view>
					<view class="input-field">
						<text class="field-label">娱乐顾客捕获率 (%)</text>
						<input type="number" v-model="inputFormData.entertainmentPenetration" class="form-input" min="0"
							max="100" step="0.1" @input="handleInputChange" placeholder="请输入比例">
					</view>
				</view>
			</view>

			<!-- 其他客流信息卡片 -->
			<view class="section-card">
				<view class="section-header">
					<view class="icon-container">
						<text class="section-icon">🚶</text>
					</view>
					<text class="section-title">其他客流信息</text>
					<text class="tip-icon" @tap="showTip('other')">？</text>
				</view>
				<view class="input-group">
					<view class="input-field">
						<text class="field-label">其他客流来源 (人/天)</text>
						<input type="number" v-model="inputFormData.otherCustomersSource" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入人数">
					</view>
					<view class="input-field">
						<text class="field-label">其他客流捕获率 (%)</text>
						<input type="number" v-model="inputFormData.otherCustomersPenetration" class="form-input"
							min="0" max="100" step="0.1" @input="handleInputChange" placeholder="请输入比例">
					</view>
				</view>
			</view>

			<!-- 竞争环境信息卡片 -->
			<view class="section-card">
				<view class="section-header">
					<view class="icon-container">
						<text class="section-icon">⚔️</text>
					</view>
					<text class="section-title">竞争环境信息</text>
					<text class="tip-icon" @tap="showTip('competition')">？</text>
				</view>
				<view class="input-group">
					<view class="input-field">
						<text class="field-label">竞争对手数量 (个)</text>
						<input type="number" v-model="inputFormData.competitorCount" class="form-input" min="0"
							@input="handleInputChange" placeholder="请输入数量">
					</view>
					<view class="input-field">
						<text class="field-label">竞争对手影响率 (%)</text>
						<input type="number" v-model="inputFormData.competitorImpactRate" class="form-input" min="0"
							max="100" @input="handleInputChange" placeholder="请输入影响率">
					</view>
				</view>
			</view>
			<!-- 操作按钮组 -->
			<view class="button-group">
				<!-- 信息录入选项卡下的按钮 -->
				<template v-if="activeTab === 'input'">
					<button class="button secondary-btn" @click="handleReset">清空数据</button>
					<button class="button primary-btn" @click="handleAnalyzeAndSave">分析结果</button>
					<button class="button primary-btn" @click="fillWithDemoData">模拟数据</button>
				</template>
			</view>

		</scroll-view>

		<!-- 结果区域 -->
		<scroll-view scroll-y class="results-section" v-if="activeTab === 'result'">
			<view class="section-header">
				<view class="icon-container">
					<text class="section-icon">📊</text>
				</view>
				<text class="section-title">客流量预测结果</text>
				<text class="tip-icon" @tap="showTip('results')">？</text>
			</view>

			<!-- 结果卡片容器 -->
			<view class="result-cards">
				<!-- 客流来源分析卡片 -->
				<view class="result-card">
					<view class="result-title">
						🔍 客流来源分析
					</view>
					<view class="chart-container" id="customerSourceChart">
						<view class="chart-bar" v-for="source in chartSources" :key="source.name"
							:style="{height: source.height + '%', background: 'linear-gradient(to top, ' + source.color + ', ' + source.color + '80)'}">
							<text class="chart-value">{{ source.value }}</text>
							<text class="chart-label">{{ source.name }}</text>
						</view>
					</view>
					<view class="result-grid">
						<view class="result-item">
							<text>居民区客流</text>
							<text class="result-value">{{ resultData.residentialCustomers }}人/天</text>
							<text>居民 × 捕获率</text>
						</view>
						<view class="result-item">
							<text>办公区客流</text>
							<text class="result-value">{{ resultData.officeCustomers }}人/天</text>
							<text>员工 × 捕获率</text>
						</view>
						<view class="result-item">
							<text>娱乐区客流</text>
							<text class="result-value">{{ resultData.entertainmentCustomersResult }}人/天</text>
							<text>顾客 × 捕获率</text>
						</view>
						<view class="result-item">
							<text>其他客流</text>
							<text class="result-value">{{ resultData.otherCustomers }}人/天</text>
							<text>路过及其他</text>
						</view>
					</view>
				</view>

				<!-- 客流预测汇总卡片 -->
				<view class="result-card">
					<view class="result-title">
						📈 客流预测汇总
					</view>
					<view class="result-grid">
						<view class="result-item">
							<text>预估日均客流</text>
							<text class="result-value">{{ resultData.totalDailyCustomers }}人/天</text>
							<text>所有来源总和</text>
						</view>
						<view class="result-item">
							<text>预估转化率</text>
							<text class="result-value">{{ resultData.conversionRate.toFixed(1) }}%</text>
							<text>实际购物比例</text>
						</view>
					</view>
				</view>

				<!-- 核心结果卡片 -->
				<view class="result-card">
					<view class="result-title">
						🎯 核心业务指标
						<text class="tip-icon" @tap="showConversionTip">？</text>
					</view>
					<!-- 主要结果区域 -->
					<view class="primary-results">
						<view class="key-metric">
							<text class="metric-label">有效购物客流</text>
							<text class="metric-value">{{ resultData.effectiveCustomers }}人/天</text>
							<text class="metric-desc">每日实际购买顾客</text>
						</view>
					</view>
				</view>

				<!-- 客流转化分析弹窗 -->
				<uni-popup ref="conversionPopup" type="center">
					<view class="conversion-popup">
						<text class="popup-icon">🔄</text>
						<text class="popup-title">客流转化分析</text>
						<!-- 转化漏斗可视化 -->
						<view class="conversion-funnel">
							<view class="funnel-step" style="width: 100%;">
								<text class="funnel-label">基础客流</text>
								<text class="funnel-value">{{ resultData.baseTotalCustomers }}人</text>
							</view>
							<view class="funnel-arrow">↓</view>
							<view class="funnel-step" style="width: 85%;">
								<text class="funnel-label">实际可获客流</text>
								<text class="funnel-value">{{ resultData.totalDailyCustomers }}人/天</text>
								<text class="funnel-note">竞争影响:
									{{ resultData.competitionImpact.toFixed(0) }}%</text>
							</view>
							<view class="funnel-arrow">↓</view>
							<view class="funnel-step highlight" style="width: 60%;">
								<text class="funnel-label">有效购物客流</text>
								<text class="funnel-value">{{ resultData.effectiveCustomers }}</text>
								<text class="funnel-note">转化率: {{ resultData.conversionRate }}</text>
							</view>
						</view>
						<button class="btn-primary" style="margin-top: 30rpx;"
							@tap="conversionPopup?.close()">我知道了</button>
					</view>
				</uni-popup>

				<!-- 竞争环境分析卡片 -->
				<view class="result-card">
					<view class="result-title">
						⚔️ 竞争环境分析
					</view>
					<!-- 竞争指标卡片 -->
					<view class="competition-indicators">
						<view class="competition-item">
							<text class="competition-label">竞争对手数量</text>
							<text class="competition-value">{{ inputFormData.competitorCount }}个</text>
						</view>
						<view class="competition-item">
							<text class="competition-label">竞争对手影响率</text>
							<text class="competition-value">{{ inputFormData.competitorImpactRate }}%</text>
						</view>
						<view class="competition-item">
							<text class="competition-label">竞争影响系数</text>
							<text class="competition-value">{{ resultData.competitionImpact }}</text>
						</view>
					</view>
					<!-- 竞争分析说明 -->
					<view class="competition-analysis">
						<view class="analysis-item">
							<text class="analysis-icon">💡</text>
							<text class="analysis-text">
								竞争影响系数越低，表示周边竞争越激烈，您的店铺能获得的实际客流比例越少
							</text>
						</view>
						<view class="analysis-item">
							<text class="analysis-icon">📊</text>
							<text class="analysis-text">
								在竞争激烈区域，建议通过差异化服务、特色产品或会员体系提升客户粘性和转化率
							</text>
						</view>
					</view>
				</view>



				<!-- 风险评估卡片 -->
				<view class="risk-card" :style="{borderColor: riskAssessment.color}">
					<view class="risk-header">
						<text class="risk-title">⚠️ 风险等级评估</text>
						<text class="risk-level" :style="{color: riskAssessment.color}">
							{{ riskAssessment.level }}
						</text>
						<!-- 风险等级说明提示按钮 -->
						<text class="risk-info-btn" @tap="showRiskLevelModal">ℹ️</text>
					</view>
					<text class="risk-advice">{{ riskAssessment.advice }}</text>
				</view>


				<!-- 调研建议卡片 -->
				<view class="advice-card">
					<view class="advice-title">
						<text class="advice-icon">💡</text>
						调研建议
					</view>
					<rich-text :nodes="researchAdvice" class="advice-content"></rich-text>
				</view>
			</view>

			<!-- 操作按钮组 -->
			<view class="btn-group">
				<!-- 结果选项卡下的按钮 -->
				<button class="btn primary-btn" @tap="activeTab = 'input'">返回信息录入</button>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { MarketResearchInputData, ResultData, ChartSource, RiskAssessment, RISK_CONFIGS } from '@/types/market-research';
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import NavBar from '@/components/nav-bar.vue';
	import { getThemeStyles } from '@/stores/theme';
	import { getDetailAPI } from '@/services/project';
	import { updateTaskAPI } from '@/services/task';
	import { saveMarketResearchAPI, getMarketResearchAPI } from '@/services/market-research';
	import { TaskType, TaskStatus } from '@/types/project';
	import { showToast, showLoading, hideLoading, getSafeAreaTop, navigateTo, formatNumber } from '@/utils/global';
	// 项目ID（从URL参数获取）
	const projectId = ref<number>(0);
	const taskId = ref<number>(0);
	const projectName = ref<string>('');

	// 本地状态
	/** 当前激活的选项卡 */
	const activeTab = ref<'input' | 'result'>('input');

	/** 输入表单数据（用户输入的原始数据，保存到后台） */
	const inputFormData = ref<MarketResearchInputData>({
		// 默认全部给0
		id: 0,
		projectId: 0,
		taskId: 0,

		// ==================== 输入数据：周边小区信息 ====================
		residentialComplexes: 0,
		residentsCount: 0,
		residentialPenetration: 0,

		// ==================== 输入数据：办公区域信息 ====================
		officeBuildings: 0,
		officeWorkers: 0,
		officePenetration: 0,

		// ==================== 输入数据：娱乐与会所信息 ====================
		entertainmentVenues: 0,
		entertainmentCustomers: 0,
		entertainmentPenetration: 0,

		// ==================== 输入数据：其他客流信息 ====================
		otherCustomersSource: 0,
		otherCustomersPenetration: 0,

		// ==================== 输入数据：竞争环境信息 ====================
		competitorCount: 0,
		competitorImpactRate: 0,
	});

	/** 计算结果数据（前端计算，不保存到后台） */
	const resultData = ref<ResultData>({
		/** 居民区客流量 */
		residentialCustomers: 0,
		/** 办公区客流量 */
		officeCustomers: 0,
		/** 娱乐区客流量结果 */
		entertainmentCustomersResult: 0,
		/** 其他客流量 */
		otherCustomers: 0,
		/** 预估日均客流总量 */
		totalDailyCustomers: 0,
		/** 预估转化率 (%) */
		conversionRate: 0,
		/** 有效购物客流量 */
		effectiveCustomers: 0,
		/** 竞争影响系数 */
		competitionImpact: 0,
		/** 基础总客流（未考虑竞争影响） */
		baseTotalCustomers: 0,
	});
	/** 图表数据源，用于展示各类客源比例 */
	const chartSources = ref<ChartSource[]>([]);
	/** 市场调研建议，根据计算结果生成 */
	const researchAdvice = ref<string>('');
	/** 风险评估数据 */
	const riskAssessment = ref<RiskAssessment>({
		level: '',
		color: '',
		advice: ''
	});

	/** 风险等级配置列表，用于弹窗展示 */
	const riskConfigs = RISK_CONFIGS;

	/** 风险等级弹窗引用 */
	const riskModalRef = ref(null);

	/** 显示风险等级说明弹窗 */
	const showRiskLevelModal = () => {
		if (riskModalRef.value) {
			riskModalRef.value.open();
		}
	};

	/** 关闭风险等级说明弹窗 */
	const closeRiskLevelModal = () => {
		if (riskModalRef.value) {
			riskModalRef.value.close();
		}
	};



	/** 提示弹窗相关 */
	const popup = ref<InstanceType<typeof uniPopup>>();
	const conversionPopup = ref<InstanceType<typeof uniPopup>>();
	const currentTipContent = ref<string>('');

	/** 各部分的提示内容 */
	const tipContents = {
		residential: '统计以店铺为中心，步行5-10分钟（约500-800米）半径内的所有住宅小区。重点记录小区楼栋数、单元数、楼层数，通过亮灯率估算实际入住户数，按户均2.5-3.2人计算居民总量。',
		office: '统计1公里范围内商务楼宇、办公园区内的常驻员工数量。可通过观察早晚人流量、查询企业入驻信息、估算办公面积密度（如8-15㎡/人）来推算。',
		entertainment: '统计周边商场、餐饮街、公园、健身房等休闲场所的日均客流量。这些客群消费意愿强，可作为补充客流来源，尤其在晚间和周末时段。',
		other: '包括公交地铁换乘客流、学校接送家长、医院访客等流动人群。通过分时段蹲点计数，记录不同时段经过店门口的自然人流量。',
		competition: '竞争对手会显著影响您的客流捕获率。直接输入竞争对手数量和他们对客流的综合影响率（0-100%）。',
		results: '计算逻辑说明：\n1. 基础总客流=上述四类客流之和\n2. 竞争影响系数=(100-竞争对手影响率)/100\n3. 预估日均客流=基础总客流×竞争影响系数\n4. 预估转化率采用固定值10%\n5. 有效购物客流=预估日均客流×预估转化率(%)'
	};

	/**
	 * 显示客流转化分析弹窗
	 */
	const showConversionTip = () => {
		conversionPopup.value?.open();
	};

	/**
	 * 显示提示信息
	 * @param tipKey 提示内容的键名
	 */
	const showTip = (tipKey : keyof typeof tipContents) => {
		currentTipContent.value = tipContents[tipKey];
		popup.value?.open();
	};

	// ==================== 自动计算（computed）====================

	/**
	 * 自动计算各来源客流量
	 * 使用computed实现响应式自动计算
	 */
	const computedCustomerFlows = computed(() => {
		const formData = inputFormData.value;

		return {
			residential: Math.round((formData.residentsCount || 0) * (formData.residentialPenetration || 0) / 100),
			office: Math.round((formData.officeWorkers || 0) * (formData.officePenetration || 0) / 100),
			entertainment: Math.round((formData.entertainmentCustomers || 0) * (formData.entertainmentPenetration || 0) / 100),
			other: Math.round((formData.otherCustomersSource || 0) * (formData.otherCustomersPenetration || 0) / 100)
		};
	});

	/**
	 * 自动计算竞争影响系数
	 * 公式：(100 - 竞争对手影响率) / 100
	 */
	const computedCompetitionImpact = computed(() => {
		const impactRate = inputFormData.value.competitorImpactRate || 0;
		return Math.max(0.1, Math.min(1.0, (100 - impactRate) / 100));
	});

	/**
	 * 自动计算基础总客流（未考虑竞争影响）
	 */
	const computedBaseTotalCustomers = computed(() => {
		const flows = computedCustomerFlows.value;
		return flows.residential + flows.office + flows.entertainment + flows.other;
	});

	/**
	 * 自动计算实际日均客流（考虑竞争影响）
	 */
	const computedTotalDailyCustomers = computed(() => {
		return Math.round(computedBaseTotalCustomers.value * computedCompetitionImpact.value);
	});

	/**
	 * 自动计算有效购物客流
	 * 使用固定转化率10%
	 */
	const computedEffectiveCustomers = computed(() => {
		const conversionRate = 10;
		return Math.round(computedTotalDailyCustomers.value * conversionRate / 100);
	});

	// ==================== 用户操作相关 ====================

	/**
	 * 重置数据
	 * 清空所有表单数据和计算结果，恢复到初始状态
	 */
	const handleReset = () => {
		// 清空所有输入数据
		inputFormData.value = {} as MarketResearchInputData;

		// 清空结果数据
		resultData.value = {} as ResultData;
		chartSources.value = [];
		researchAdvice.value = '';
		riskAssessment.value = {
			level: '',
			color: '',
			advice: ''
		};

		showToast('已清空所有数据', 'success');
	};

	/**
	 * 显示风险等级选择器
	 * 用户可以选择不同的风险等级，生成对应的模拟数据
	 */
	const fillWithDemoData = () => {
		uni.showActionSheet({
			itemList: [
				'🟢 低风险 - 客流充足（日均≥2000人）',
				'🟡 中低风险 - 客流较好（日均≥1000人）',
				'🟠 中等风险 - 客流一般（日均≥500人）',
				'🔴 高风险 - 客流不足（日均≥200人）',
				'⚫ 极高风险 - 严重不足（日均<200人）'
			],
			success: (res) => {
				if (!res.cancel) {
					generateDemoDataByRiskLevel(res.tapIndex);
				}
			}
		});
	};

	/**
	 * 根据风险等级生成对应的模拟数据
	 * @param riskIndex 风险等级索引 (0=低风险, 1=中低风险, 2=中等风险, 3=高风险, 4=极高风险)
	 * 
	 * 计算逻辑：
	 * 1. 基础总客流 = 居民区客流 + 办公区客流 + 娱乐区客流 + 其他客流
	 * 2. 实际日均客流 = 基础总客流 × (100 - 竞争影响率) / 100
	 * 3. 有效购物客流 = 实际日均客流 × 10%
	 * 
	 * 风险等级标准：
	 * - 低风险：有效购物客流 ≥ 2000人/天
	 * - 中低风险：有效购物客流 ≥ 1000人/天
	 * - 中等风险：有效购物客流 ≥ 500人/天
	 * - 高风险：有效购物客流 ≥ 200人/天
	 * - 极高风险：有效购物客流 < 200人/天
	 */
	const generateDemoDataByRiskLevel = (riskIndex : number) => {
		// 定义不同风险等级的数据配置（已反向计算验证）
		const riskDataConfigs = [
			// 0 - 低风险：目标有效客流≥2000人
			// 计算：居民(60000×30%=18000) + 办公(12000×35%=4200) + 娱乐(5000×25%=1250) + 其他(4000×30%=1200) = 24650
			// 实际日均 = 24650 × 0.85 = 20952.5 → 有效客流 = 2095人 ✓
			{
				residentialComplexes: 20,
				residentsCount: 60000,
				residentialPenetration: 30,
				officeBuildings: 8,
				officeWorkers: 12000,
				officePenetration: 35,
				entertainmentVenues: 10,
				entertainmentCustomers: 5000,
				entertainmentPenetration: 25,
				otherCustomersSource: 4000,
				otherCustomersPenetration: 30,
				competitorCount: 1,
				competitorImpactRate: 15
			},
			// 1 - 中低风险：目标有效客流≥1000人
			// 计算：居民(30000×25%=7500) + 办公(6000×30%=1800) + 娱乐(2500×20%=500) + 其他(2000×25%=500) = 10300
			// 实际日均 = 10300 × 0.8 = 8240 → 有效客流 = 824人（调整中...）
			// 重新计算：居民(35000×28%=9800) + 办公(7000×32%=2240) + 娱乐(3000×22%=660) + 其他(2500×28%=700) = 13400
			// 实际日均 = 13400 × 0.8 = 10720 → 有效客流 = 1072人 ✓
			{
				residentialComplexes: 12,
				residentsCount: 35000,
				residentialPenetration: 28,
				officeBuildings: 5,
				officeWorkers: 7000,
				officePenetration: 32,
				entertainmentVenues: 6,
				entertainmentCustomers: 3000,
				entertainmentPenetration: 22,
				otherCustomersSource: 2500,
				otherCustomersPenetration: 28,
				competitorCount: 2,
				competitorImpactRate: 20
			},
			// 2 - 中等风险：目标有效客流≥500人
			// 计算：居民(18000×22%=3960) + 办公(3500×25%=875) + 娱乐(1500×18%=270) + 其他(1200×22%=264) = 5369
			// 实际日均 = 5369 × 0.7 = 3758.3 → 有效客流 = 376（不够）
			// 重新计算：居民(20000×24%=4800) + 办公(4000×28%=1120) + 娱乐(2000×20%=400) + 其他(1500×25%=375) = 6695
			// 实际日均 = 6695 × 0.7 = 4686.5 → 有效客流 = 469（还是不够）
			// 再调整：居民(22000×25%=5500) + 办公(4500×28%=1260) + 娱乐(2200×20%=440) + 其他(1600×25%=400) = 7600
			// 实际日均 = 7600 × 0.7 = 5320 → 有效客流 = 532人 ✓
			{
				residentialComplexes: 8,
				residentsCount: 22000,
				residentialPenetration: 25,
				officeBuildings: 3,
				officeWorkers: 4500,
				officePenetration: 28,
				entertainmentVenues: 4,
				entertainmentCustomers: 2200,
				entertainmentPenetration: 20,
				otherCustomersSource: 1600,
				otherCustomersPenetration: 25,
				competitorCount: 3,
				competitorImpactRate: 30
			},
			// 3 - 高风险：目标有效客流≥200人
			// 计算：居民(8000×18%=1440) + 办公(1800×20%=360) + 娱乐(800×15%=120) + 其他(600×18%=108) = 2028
			// 实际日均 = 2028 × 0.6 = 1216.8 → 有效客流 = 122（不够）
			// 重新计算：居民(10000×20%=2000) + 办公(2200×22%=484) + 娱乐(1000×16%=160) + 其他(800×20%=160) = 2804
			// 实际日均 = 2804 × 0.6 = 1682.4 → 有效客流 = 168（还不够）
			// 再调整：居民(12000×20%=2400) + 办公(2500×22%=550) + 娱乐(1200×16%=192) + 其他(1000×20%=200) = 3342
			// 实际日均 = 3342 × 0.6 = 2005.2 → 有效客流 = 201人 ✓
			{
				residentialComplexes: 5,
				residentsCount: 12000,
				residentialPenetration: 20,
				officeBuildings: 2,
				officeWorkers: 2500,
				officePenetration: 22,
				entertainmentVenues: 2,
				entertainmentCustomers: 1200,
				entertainmentPenetration: 16,
				otherCustomersSource: 1000,
				otherCustomersPenetration: 20,
				competitorCount: 4,
				competitorImpactRate: 40
			},
			// 4 - 极高风险：目标有效客流<200人
			// 计算：居民(4000×12%=480) + 办公(800×15%=120) + 娱乐(400×10%=40) + 其他(300×12%=36) = 676
			// 实际日均 = 676 × 0.5 = 338 → 有效客流 = 34人（太低了）
			// 调整：居民(6000×15%=900) + 办公(1200×18%=216) + 娱乐(600×12%=72) + 其他(500×15%=75) = 1263
			// 实际日均 = 1263 × 0.5 = 631.5 → 有效客流 = 63人（还是太低）
			// 再调整：居民(8000×16%=1280) + 办公(1500×18%=270) + 娱乐(700×12%=84) + 其他(600×15%=90) = 1724
			// 实际日均 = 1724 × 0.5 = 862 → 有效客流 = 86人（还是低）
			// 最终调整：居民(10000×17%=1700) + 办公(1800×20%=360) + 娱乐(900×13%=117) + 其他(700×16%=112) = 2289
			// 实际日均 = 2289 × 0.5 = 1144.5 → 有效客流 = 114人 ✓
			{
				residentialComplexes: 3,
				residentsCount: 10000,
				residentialPenetration: 17,
				officeBuildings: 1,
				officeWorkers: 1800,
				officePenetration: 20,
				entertainmentVenues: 1,
				entertainmentCustomers: 900,
				entertainmentPenetration: 13,
				otherCustomersSource: 700,
				otherCustomersPenetration: 16,
				competitorCount: 5,
				competitorImpactRate: 50
			}
		];

		// 获取选中风险等级的数据配置
		const config = riskDataConfigs[riskIndex];

		// 填充数据
		inputFormData.value = { ...inputFormData.value, ...config };

		// 触发计算，更新结果和风险评估
		calculateCustomerFlow();

		// 显示成功提示
		const riskLevels = ['低风险', '中低风险', '中等风险', '高风险', '极高风险'];
		showToast(`已填充${riskLevels[riskIndex]}模拟数据`, 'success');
	};




	// ==================== 综合计算相关 ====================

	/**
	 * 更新结果数据对象
	 * 使用computed计算的结果更新响应式的结果数据对象
	 * 同时会更新风险评估、图表数据和调研建议
	 */
	const updateResultData = () : void => {
		const flows = computedCustomerFlows.value;
		const conversionRate = 10;

		// 更新风险评估
		updateRiskAssessment(computedEffectiveCustomers.value);

		// 更新响应式结果数据对象（使用computed计算的值）
		resultData.value = {
			residentialCustomers: flows.residential,
			officeCustomers: flows.office,
			entertainmentCustomersResult: flows.entertainment,
			otherCustomers: flows.other,
			totalDailyCustomers: computedTotalDailyCustomers.value,
			conversionRate: conversionRate,
			effectiveCustomers: computedEffectiveCustomers.value,
			competitionImpact: computedCompetitionImpact.value * 100,
			baseTotalCustomers: computedBaseTotalCustomers.value
		};

		// 更新图表数据
		updateCustomerSourceChart(flows.residential, flows.office, flows.entertainment, flows.other);

		// 更新调研建议
		updateResearchAdvice(
			inputFormData.value.residentialComplexes || 0,
			inputFormData.value.residentsCount || 0,
			inputFormData.value.officeBuildings || 0,
			inputFormData.value.officeWorkers || 0,
			computedEffectiveCustomers.value
		);
	};

	/**
	 * 处理表单输入变化，当用户在输入框中输入内容时触发
	 * 更新表单数据并重新计算客流量结果
	 */
	const handleInputChange = () => {
		calculateCustomerFlow();
	};




	/**
	 * 市场调研计算功能
	 * 直接调用 updateResultData 进行统一计算和更新
	 * （所有计算逻辑已通过 computed 属性实现，updateResultData 内部会更新图表、建议和风险评估）
	 */
	const calculateCustomerFlow = () => {
		updateResultData();
	};







	/**
	 * 更新风险评估
	 * @param effectiveCustomers 有效购物客流量
	 */
	const updateRiskAssessment = (effectiveCustomers : number) => {
		// 查找匹配的风险配置（从高到低排序查找第一个满足条件的）
		const sortedConfigs = [...RISK_CONFIGS].sort((a, b) => b.minCustomers - a.minCustomers);
		const matchingConfig = sortedConfigs.find(config => effectiveCustomers >= config.minCustomers) || sortedConfigs[sortedConfigs.length - 1];

		riskAssessment.value = {
			level: matchingConfig.level,
			color: matchingConfig.color,
			advice: matchingConfig.advice
		};
	};

	/**
	 * 更新客流来源图表数据，用于可视化展示各类客源比例
	 * @param residential 居民区客流量
	 * @param office 办公区客流量
	 * @param entertainment 娱乐区客流量
	 * @param other 其他客流量
	 */
	/**
	 * 更新客流来源图表数据
	 * @param residential 居民区客流量
	 * @param office 办公区客流量
	 * @param entertainment 娱乐区客流量
	 * @param other 其他客流量
	 */
	const updateCustomerSourceChart = (residential : number, office : number, entertainment : number, other : number) => {
		// 定义客流来源数据，暂不包含高度信息
		const sources : Omit<ChartSource, 'height'>[] = [
			{ name: '居民区', value: residential, color: '#3498db' },
			{ name: '办公区', value: office, color: '#2ecc71' },
			{ name: '娱乐区', value: entertainment, color: '#9b59b6' },
			{ name: '其他', value: other, color: '#e74c3c' }
		];

		// 计算所有客流来源中的最大值，用于后续计算图表柱形高度
		const maxValue = Math.max(...sources.map(s => s.value));

		// 根据最大值计算每个客流来源的柱形高度，并更新图表数据源
		chartSources.value = sources.map(source => ({
			...source,
			height: maxValue > 0 ? (source.value / maxValue) * 100 : 0
		}));
	};

	/**
	 * 更新调研建议，根据市场调研数据生成针对性建议
	 * @param residentialComplexes 周边小区数量
	 * @param residentsCount 居民总人数
	 * @param officeBuildings 办公大楼数量
	 * @param officeWorkers 办公人员数量
	 * @param effectiveCustomers 有效购物客流量
	 */
	const updateResearchAdvice = (residentialComplexes : number, residentsCount : number, officeBuildings : number, officeWorkers : number, effectiveCustomers : number) => {
		let advice = '';

		if (effectiveCustomers >= 2000) {
			advice = `根据您的市场调研数据，该区域<strong>客流量充足</strong>，适合开设生鲜超市。建议：<br>
	• 重点关注周边${residentialComplexes}个小区的${formatNumber(residentsCount)}居民，他们是主要客源<br>
	• 办公区有${formatNumber(officeWorkers)}名员工，可发展午间和下班购物需求<br>
	• 预估有效购物客流${formatNumber(effectiveCustomers)}人/天，客流非常充足`;
		} else if (effectiveCustomers >= 1000) {
			advice = `根据您的市场调研数据，该区域<strong>客流量良好</strong>，适合开设生鲜超市。建议：<br>
	• 周边${residentialComplexes}个小区居民${formatNumber(residentsCount)}人，是主要客源<br>
	• 办公区${formatNumber(officeWorkers)}名员工，可针对性营销发展<br>
	• 预估有效购物客流${formatNumber(effectiveCustomers)}人/天，客流较好`;
		} else if (effectiveCustomers >= 500) {
			advice = `根据您的市场调研数据，该区域<strong>客流量一般</strong>，需要谨慎评估。建议：<br>
	• 周边${residentialComplexes}个小区居民${formatNumber(residentsCount)}人，需提高捕获率<br>
	• 办公区${formatNumber(officeWorkers)}名员工，可针对性营销<br>
	• 预估有效购物客流${formatNumber(effectiveCustomers)}人/天，客流一般`;
		} else if (effectiveCustomers >= 200) {
			advice = `根据您的市场调研数据，该区域<strong>客流量不足</strong>，开设生鲜超市风险较高。建议：<br>
	• 周边${residentialComplexes}个小区居民${formatNumber(residentsCount)}人，基础客源有限<br>
	• 办公区${formatNumber(officeWorkers)}名员工，不足以支撑日常运营<br>
	• 预估有效购物客流仅${formatNumber(effectiveCustomers)}人/天，客流较少`;
		} else {
			advice = `根据您的市场调研数据，该区域<strong>客流量严重不足</strong>，不建议开设生鲜超市。建议：<br>
	• 周边${residentialComplexes}个小区居民${formatNumber(residentsCount)}人，基础客源严重不足<br>
	• 办公区${formatNumber(officeWorkers)}名员工，不足以支撑日常运营<br>
	• 预估有效购物客流仅${formatNumber(effectiveCustomers)}人/天，客流极少`;
		}

		researchAdvice.value = advice;
	};

	/**
	 * 分析结果并保存数据
	 * 点击"分析结果"按钮时调用
	 * 
	 * 执行流程：
	 * 1. 执行所有计算并更新结果
	 * 2. 仅保存输入数据到后端（不保存计算结果）
	 * 3. 更新任务状态为已完成
	 * 4. 切换到结果展示选项卡
	 */
	const handleAnalyzeAndSave = async () : Promise<void> => {
		// 执行所有计算
		calculateCustomerFlow();

		try {
			showLoading('保存中...');

			// 构建保存数据（仅包含输入数据，不包含计算结果）
			const saveData : MarketResearchInputData = {
				// 基础信息
				projectId: projectId.value,
				taskId: taskId.value,

				// 输入数据
				...inputFormData.value
			};

			// 保存客流预测数据（仅输入数据）
			await saveMarketResearchAPI(saveData);

			// 更新任务状态为已完成
			await updateTaskAPI({
				projectId: projectId.value,
				id: taskId.value,
				status: TaskStatus.COMPLETED
			});

			hideLoading();
			showToast('保存成功', 'success');

			// 切换到结果选项卡
			activeTab.value = 'result';
		} catch (error : any) {
			hideLoading();
			console.error('保存失败:', error);
			showToast(error.message || '保存失败', 'error');
		}
	};

	// 获取主题样式
	const themeStyles = computed(() => getThemeStyles());

	// 容器背景样式
	const containerStyle = computed(() => ({
		background: themeStyles.value.bgGradient
	}));

	// ==================== 生命周期相关 ====================

	/**
	 * 初始化页面数据
	 * 在页面加载完成后执行初始计算
	 */
	const initializePageData = () : void => {
		calculateCustomerFlow();
	};

	/**
	 * 页面加载时接收参数并加载数据
	 * 
	 * 执行流程：
	 * 1. 接收并转换projectId和taskId参数
	 * 2. 加载项目和任务数据
	 * 3. 尝试加载已保存的输入数据
	 * 4. 如果存在输入数据，自动执行计算
	 * 5. 如果任务未开始，标记为进行中
	 */
	onLoad(async (options : { projectId : number, taskId : number }) => {
		try {
			// 将URL参数从字符串转换为数字
			projectId.value = options.projectId;
			taskId.value = options.taskId;

			// 加载项目数据
			const projectRes = await getDetailAPI(projectId.value);
			projectName.value = projectRes.data.name;

			// 查找客流预测任务
			const task = projectRes.data.tasks.find((t : any) => t.id === taskId.value);

			// 尝试加载已保存的客流预测输入数据
			try {
				const researchRes = await getMarketResearchAPI(taskId.value);
				if (researchRes.data) {
					// 加载输入数据
					inputFormData.value = { ...inputFormData.value, ...researchRes.data };

					// 自动执行计算（基于输入数据）
					console.log('加载已保存的输入数据，自动执行计算');
					initializePageData();
				}
			} catch (error) {
				// 暂无保存的数据，使用空表单
				console.log('暂无保存的数据，使用空表单');
			}

			// 如果任务未开始，标记为进行中
			if (task?.status === TaskStatus.NOT_STARTED) {
				await updateTaskAPI({
					projectId: projectId.value,
					id: taskId.value,
					status: TaskStatus.IN_PROGRESS
				});
			}
		} catch (error : any) {
			console.error('页面加载失败:', error);
			showToast(error.message || '加载失败', 'error');
		}
	});
</script>
<style scoped lang="scss">
	/* 市场调研容器样式 */
	.market-research-container {
		/* background 由 containerStyle 动态设置 */
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		/* 页面头部区域 */
		.page-header {
			padding: 24rpx 32rpx 20rpx;
			background: v-bind('themeStyles.bgCard');
			margin: 0 0 16rpx 0;
			border-bottom: 1rpx solid v-bind('themeStyles.borderLight');
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

			/* 项目信息提示栏 */
			.project-info-bar {
				margin-bottom: 20rpx;

				.project-info-content {
					display: flex;
					align-items: center;
					gap: 20rpx;
					padding: 24rpx 28rpx;
					background: linear-gradient(135deg, v-bind('themeStyles.accentBg') 0%, v-bind('themeStyles.bgCard') 100%);
					border-radius: 16rpx;
					border-left: 6rpx solid v-bind('themeStyles.primaryColor');
					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
					position: relative;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: -50%;
						right: -10%;
						width: 200rpx;
						height: 200rpx;
						background: v-bind('themeStyles.primaryColor');
						opacity: 0.05;
						border-radius: 50%;
					}

					.info-icon {
						font-size: 48rpx;
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(135deg, v-bind('themeStyles.primaryColor') 0%, v-bind('themeStyles.accentColor') 100%);
						border-radius: 16rpx;
						box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.25);
						flex-shrink: 0;
					}

					.info-text {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 6rpx;

						.project-label {
							font-size: 22rpx;
							font-weight: 500;
							color: v-bind('themeStyles.textTertiary');
							letter-spacing: 0.5rpx;
							text-transform: uppercase;
						}

						.project-name-text {
							font-size: 28rpx;
							color: v-bind('themeStyles.textPrimary');
							font-weight: 700;
							letter-spacing: 0.5rpx;
						}
					}
				}
			}

			/* 选项卡样式 */
			.tabs {
				display: flex;
				gap: 0;
				background: transparent;
				padding: 0;
				border-radius: 0;
				border: none;
				border-bottom: 2rpx solid v-bind('themeStyles.borderLight');

				.tab {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0;
					background: transparent;
					border-radius: 0;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					position: relative;
					cursor: pointer;

					.tab-content {
						display: flex;
						align-items: center;
						gap: 12rpx;
						padding: 20rpx 16rpx;
						transition: all 0.3s ease;
					}

					.tab-icon {
						font-size: 40rpx;
						transition: all 0.3s ease;
						filter: grayscale(0.5);
					}

					.tab-text {
						font-size: 28rpx;
						font-weight: 500;
						color: v-bind('themeStyles.textTertiary');
						transition: all 0.3s ease;
					}

					.tab-indicator {
						position: absolute;
						bottom: -2rpx;
						left: 0;
						right: 0;
						height: 4rpx;
						background: v-bind('themeStyles.primaryGradient');
						border-radius: 2rpx 2rpx 0 0;
						animation: slideIn 0.3s ease;
					}

					&.active {
						.tab-icon {
							filter: grayscale(0);
							transform: scale(1.1);
						}

						.tab-text {
							color: v-bind('themeStyles.primaryColor');
							font-weight: 700;
						}
					}

					&:active {
						.tab-content {
							transform: scale(0.95);
						}
					}
				}
			}
		}

		@keyframes slideIn {
			from {
				transform: scaleX(0);
			}

			to {
				transform: scaleX(1);
			}
		}

		/* 输入区域卡片包装器 */
		.input-sections {
			flex: 1;
			height: 0;
			display: flex;
			flex-direction: column;
			gap: 24rpx;

			/* 区域卡片样式 */
			.section-card {
				background: v-bind('themeStyles.bgCard');
				border-radius: 24rpx;
				padding: 32rpx;
				box-shadow: v-bind('themeStyles.cardBoxShadow');
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				border: 1rpx solid v-bind('themeStyles.borderLight');
				position: relative;
				overflow: visible;
				margin: 20px;

				&:active {
					box-shadow: v-bind('themeStyles.hoverBoxShadow');
					transform: translateY(-2rpx);
				}

				/* 区域标题样式 */
				.section-header {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;
					padding-bottom: 24rpx;
					border-bottom: 1rpx solid v-bind('themeStyles.borderLight');

					/* 图标容器 */
					.icon-container {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						height: 80rpx;
						border-radius: 16rpx;
						background: v-bind('themeStyles.primaryGradient');
						box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
						margin-right: 20rpx;

						/* 图标样式 */
						.section-icon {
							font-size: 36rpx;
						}
					}

					/* 标题样式 */
					.section-title {
						flex: 1;
						font-size: 30rpx;
						font-weight: 700;
						color: v-bind('themeStyles.textPrimary');
						letter-spacing: 0.5rpx;
					}

					/* 提示图标样式 */
					.tip-icon {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background: v-bind('themeStyles.bgSecondary');
						color: v-bind('themeStyles.primaryColor');
						font-size: 28rpx;
						font-weight: bold;
						margin-left: 16rpx;
						cursor: pointer;
						touch-action: manipulation;
						transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
						user-select: none;

						&:active {
							background: v-bind('themeStyles.bgTertiary');
							transform: scale(0.95);
						}
					}
				}

				/* 输入组样式 */
				.input-group {
					display: grid;
					grid-template-columns: 1fr;
					gap: 24rpx;

					/* 输入字段样式 */
					.input-field {
						display: flex;
						flex-direction: column;
						gap: 12rpx;

						/* 标签样式 */
						.field-label {
							font-size: 28rpx;
							color: v-bind('themeStyles.textSecondary');
							font-weight: 600;
							letter-spacing: 0.5rpx;
						}

						/* 输入框样式 */
						.form-input {
							width: 100%;
							height: 88rpx;
							padding: 0 28rpx;
							border: 2rpx solid v-bind('themeStyles.borderColor');
							border-radius: 16rpx;
							font-size: 30rpx;
							font-weight: 500;
							color: v-bind('themeStyles.textPrimary');
							transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
							background: v-bind('themeStyles.bgSecondary');
							box-sizing: border-box;
							line-height: 88rpx;

							&:focus {
								border-color: v-bind('themeStyles.primaryColor');
								outline: none;
								background: v-bind('themeStyles.bgCard');
								box-shadow: v-bind('themeStyles.activeShadow');
								transform: translateY(-2rpx);
							}

							&::placeholder {
								color: v-bind('themeStyles.textPlaceholder');
								font-size: 26rpx;
							}
						}
					}
				}
			}

			/* 按钮组样式 */
			.button-group {
				display: flex;
				gap: 20rpx;
				margin-top: 32rpx;

				/* 按钮基础样式 */
				.button {
					flex: 1;
					padding: 28rpx 32rpx;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-weight: 600;
					text-align: center;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					border: none;
					line-height: 1.5;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					overflow: hidden;
					white-space: nowrap;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.3);
						transform: translate(-50%, -50%);
						transition: width 0.6s, height 0.6s;
					}

					&:active::before {
						width: 300rpx;
						height: 300rpx;
					}

					/* 主要按钮样式 */
					&.primary-btn {
						background: v-bind('themeStyles.primaryGradient');
						color: white;
						box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.35);

						&:active {
							transform: translateY(2rpx);
							box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.25);
						}
					}

					/* 次要按钮样式 */
					&.secondary-btn {
						background: white;
						color: v-bind('themeStyles.primaryColor');
						border: 2rpx solid v-bind('themeStyles.primaryColor');
						box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.15);

						&::before {
							background: v-bind('themeStyles.primaryColor');
							opacity: 0.1;
						}

						&:active {
							background: v-bind('themeStyles.accentBg');
							transform: translateY(2rpx);
							box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.1);
						}
					}

					/* 信息按钮样式（蓝色） */
					&.info-btn {
						background: linear-gradient(135deg, v-bind('themeStyles.infoColor') 0%, v-bind('themeStyles.primaryColor') 100%);
						color: white;
						box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.35);

						&:active {
							transform: translateY(2rpx);
							box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.25);
						}
					}
				}
			}
		}

		/* 结果区域样式 */
		.results-section {
			flex: 1;
			height: 0;
			margin-bottom: 24px;

			/* 项目信息提示栏 */
			.project-info-bar {
				margin: 24rpx 32rpx;
				padding: 24rpx 32rpx;
				background: v-bind('themeStyles.primaryGradient');
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				gap: 16rpx;
				box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);

				.project-label {
					font-size: 28rpx;
					font-weight: 600;
					color: white;
				}

				.project-name-text {
					flex: 1;
					font-size: 28rpx;
					color: white;
					font-weight: 500;
				}
			}

			/* 区域标题样式（与input-sections共享） */
			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 16px;
				padding: 24rpx;
				background: v-bind('themeStyles.bgCard');
				border-radius: 20rpx;
				border: 1rpx solid v-bind('themeStyles.borderLight');
				margin: 20px;
				box-shadow: v-bind('themeStyles.cardBoxShadow');

				.icon-container {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 16rpx;
					background: v-bind('themeStyles.primaryGradient');
					box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
					margin-right: 20rpx;

					.section-icon {
						font-size: 36rpx;
					}
				}

				.section-title {
					flex: 1;
					font-size: 30rpx;
					font-weight: 700;
					color: v-bind('themeStyles.textPrimary');
					letter-spacing: 0.5rpx;
				}

				.tip-icon {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background: v-bind('themeStyles.bgSecondary');
					color: v-bind('themeStyles.primaryColor');
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 16rpx;
					cursor: pointer;
					touch-action: manipulation;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					user-select: none;

					&:active {
						background: v-bind('themeStyles.bgTertiary');
						transform: scale(0.95);
					}
				}
			}

			/* 结果卡片容器样式 */
			.result-cards {
				margin-top: 16px;
				display: flex;
				flex-direction: column;
				gap: 16px;
				margin: 20px;

				/* 结果卡片样式 */
				.result-card {
					background: v-bind('themeStyles.bgCard');
					border-radius: 20rpx;
					padding: 32rpx 28rpx;
					box-shadow: v-bind('themeStyles.cardBoxShadow');
					border: 1rpx solid v-bind('themeStyles.borderLight');
					transition: transform 0.2s ease, box-shadow 0.2s ease;

					&:active {
						transform: translateY(2px);
						box-shadow: v-bind('themeStyles.hoverBoxShadow');
					}

					/* 结果标题样式 */
					.result-title {
						font-size: 30rpx;
						margin-bottom: 24rpx;
						color: v-bind('themeStyles.textPrimary');
						display: flex;
						align-items: center;
						font-weight: 700;
						padding-bottom: 16rpx;
						border-bottom: 1rpx solid v-bind('themeStyles.borderLight');
					}

					/* 图表容器样式 */
					.chart-container {
						display: flex;
						justify-content: space-around;
						align-items: flex-end;
						height: 220px;
						padding: 24px 12px;
						background: v-bind('themeStyles.bgSecondary');
						border-radius: 12px;
						margin-bottom: 20px;
						position: relative;
						border: 1px solid v-bind('themeStyles.borderLight');

						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							height: 40px;
							background: linear-gradient(to top, v-bind('themeStyles.bgCard + "99"'), transparent);
							border-radius: 0 0 12px 12px;
						}

						/* 图表柱形样式 */
						.chart-bar {
							width: 60px;
							border-radius: 6px 6px 0 0;
							position: relative;
							transition: all 0.3s;
							filter: drop-shadow(0 2px 4px v-bind('themeStyles.primaryColor + "33"'));

							/* 图表值样式 */
							.chart-value {
								position: absolute;
								top: -28px;
								left: 50%;
								transform: translateX(-50%);
								font-size: 14px;
								font-weight: bold;
								color: v-bind('themeStyles.textPrimary');
								text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
							}

							/* 图表标签样式 */
							.chart-label {
								position: absolute;
								bottom: -25px;
								left: 50%;
								transform: translateX(-50%);
								font-size: 12px;
								color: v-bind('themeStyles.textSecondary');
								white-space: nowrap;
								font-weight: 500;
							}
						}
					}

					/* 结果网格样式 - 始终两行两列布局 */
					.result-grid {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-template-rows: repeat(2, auto);
						gap: 16rpx;
						align-items: stretch;

						/* 结果项样式 - 移动端优化 */
						.result-item {
							background: v-bind('themeStyles.bgSecondary');
							padding: 24rpx;
							border-radius: 16rpx;
							box-shadow: v-bind('themeStyles.shadowSm');
							border: 1rpx solid v-bind('themeStyles.borderLight');
							transition: all 0.3s;
							text-align: center;

							&:active {
								transform: scale(0.98);
								background: v-bind('themeStyles.bgTertiary');
								box-shadow: v-bind('themeStyles.cardBoxShadow');
							}

							text:first-child {
								font-size: 13px;
								color: v-bind('themeStyles.textSecondary');
								font-weight: 500;
							}

							text:last-child {
								font-size: 12px;
								color: v-bind('themeStyles.textTertiary');
							}

							/* 结果值样式 */
							.result-value {
								display: block;
								font-size: 18px;
								font-weight: 700;
								background: v-bind('themeStyles.primaryGradient');
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								margin: 8px 0;
								letter-spacing: -0.02em;
							}
						}
					}

					/* 核心业务指标样式 */
					.primary-results {
						display: flex;
						justify-content: center;
						align-items: center;
						min-height: 200rpx;

						.key-metric {
							width: 100%;
							text-align: center;
							padding: 40rpx 30rpx;
							background: v-bind('themeStyles.accentBg');
							border-radius: 20rpx;
							border: 1rpx solid v-bind('themeStyles.borderLight');
							border-left: 6rpx solid v-bind('themeStyles.primaryColor');
							box-shadow: v-bind('themeStyles.cardBoxShadow');

							.metric-label {
								display: block;
								font-size: 28rpx;
								color: v-bind('themeStyles.textPrimary');
								margin-bottom: 16rpx;
								font-weight: 600;
							}

							.metric-value {
								display: block;
								font-size: 64rpx;
								font-weight: bold;
								background: v-bind('themeStyles.primaryGradient');
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								margin: 24rpx 0;
								text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
							}

							.metric-desc {
								display: block;
								font-size: 26rpx;
								color: v-bind('themeStyles.textSecondary');
								opacity: 0.9;
							}
						}
					}

					/* 竞争环境分析样式 */
					.competition-indicators {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: 16rpx;
						margin-bottom: 24rpx;

						.competition-item {
							background-color: v-bind('themeStyles.bgSecondary');
							border-radius: 12rpx;
							padding: 20rpx;
							text-align: center;
							border: 1rpx solid v-bind('themeStyles.borderLight');

							.competition-label {
								display: block;
								font-size: 24rpx;
								color: v-bind('themeStyles.textSecondary');
								margin-bottom: 8rpx;
							}

							.competition-value {
								display: block;
								font-size: 32rpx;
								font-weight: bold;
								color: v-bind('themeStyles.warningColor');
								margin-top: 8rpx;
							}
						}
					}

					.competition-analysis {
						margin-top: 20rpx;

						.analysis-item {
							display: flex;
							align-items: flex-start;
							padding: 24rpx;
							background-color: v-bind('themeStyles.bgSecondary');
							border-radius: 12rpx;
							margin-bottom: 16rpx;
							border: 1rpx solid v-bind('themeStyles.borderLight');
							border-left: 6rpx solid v-bind('themeStyles.warningColor');

							.analysis-icon {
								font-size: 32rpx;
								margin-right: 16rpx;
								margin-top: 2rpx;
							}

							.analysis-text {
								font-size: 26rpx;
								color: v-bind('themeStyles.textSecondary');
								line-height: 1.6;
								flex: 1;
							}
						}
					}
				}

				/* 风险评估卡片样式 */
				.risk-card {
					background: v-bind('themeStyles.bgCard');
					border-radius: 20rpx;
					padding: 32rpx 28rpx;
					box-shadow: v-bind('themeStyles.cardBoxShadow');
					border: 1rpx solid v-bind('themeStyles.borderLight');
					border-left: 6rpx solid v-bind('themeStyles.warningColor');

					.risk-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						padding-bottom: 16rpx;
						border-bottom: 1rpx solid v-bind('themeStyles.borderLight');

						.risk-title {
							font-size: 30rpx;
							font-weight: 700;
							color: v-bind('themeStyles.textPrimary');
						}

						.risk-level {
							font-size: 28rpx;
							font-weight: 700;
						}

						/* 风险等级说明提示按钮样式 */
						.risk-info-btn {
							font-size: 18px;
							margin-left: 12px;
							cursor: pointer;
							padding: 6px;
							border-radius: 50%;
							touch-action: manipulation;
							transition: background-color 0.2s;

							&:active {
								background-color: v-bind('themeStyles.bgSecondary');
							}
						}
					}

					.risk-advice {
						font-size: 15px;
						line-height: 1.6;
						color: v-bind('themeStyles.textSecondary');
					}
				}

				/* 建议卡片样式 */
				.advice-card {
					background: v-bind('themeStyles.bgCard');
					border-radius: 20rpx;
					padding: 32rpx 28rpx;
					box-shadow: v-bind('themeStyles.cardBoxShadow');
					border: 1rpx solid v-bind('themeStyles.borderLight');
					position: relative;
					overflow: hidden;

					&::after {
						content: '';
						position: absolute;
						bottom: -40rpx;
						right: -40rpx;
						width: 200rpx;
						height: 200rpx;
						background: v-bind('themeStyles.primaryColor + "0d"');
						border-radius: 50%;
					}

					/* 建议标题样式 */
					.advice-title {
						font-size: 30rpx;
						margin-bottom: 20rpx;
						color: v-bind('themeStyles.textPrimary');
						font-weight: 700;
						display: flex;
						align-items: center;
						padding-bottom: 16rpx;
						border-bottom: 1rpx solid v-bind('themeStyles.borderLight');
						position: relative;
						z-index: 1;

						/* 建议标题图标样式 */
						.advice-icon {
							margin-right: 12rpx;
						}
					}

					/* 建议内容样式 */
					.advice-content {
						font-size: 28rpx;
						line-height: 1.7;
						color: v-bind('themeStyles.textSecondary');
						font-weight: 500;
						position: relative;
						z-index: 1;
					}
				}
			}

			/* 按钮组样式 */
			.btn-group {
				display: flex;
				gap: 20rpx;
				margin-top: 32rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				/* 按钮基础样式 */
				.btn {
					flex: 1;
					padding: 28rpx 40rpx;
					border: none;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					text-align: center;
					position: relative;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.3);
						transform: translate(-50%, -50%);
						transition: width 0.6s, height 0.6s;
					}

					&:active::before {
						width: 300rpx;
						height: 300rpx;
					}

					/* 主要按钮样式 */
					&.btn-primary {
						background: v-bind('themeStyles.primaryGradient');
						color: white;
						box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.35);

						&:active {
							transform: translateY(2rpx);
							box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.25);
						}
					}

					/* 次要按钮样式 */
					&.btn-secondary {
						background: white;
						color: v-bind('themeStyles.primaryColor');
						border: 2rpx solid v-bind('themeStyles.primaryColor');
						box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.15);

						&::before {
							background: v-bind('themeStyles.primaryColor');
							opacity: 0.1;
						}

						&:active {
							background: v-bind('themeStyles.accentBg');
							transform: translateY(2rpx);
							box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.1);
						}
					}
				}
			}
		}

		/* 风险等级弹窗样式 - 适配uni-popup */
		.risk-modal {
			background-color: v-bind('themeStyles.bgCard');
			border-radius: 16px;
			width: 100%;
			max-height: 80vh;
			box-shadow: v-bind('themeStyles.cardBoxShadow');

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 18px 20px;
				border-bottom: 1px solid v-bind('themeStyles.borderLight');

				.modal-title {
					font-size: 18px;
					font-weight: 700;
					color: v-bind('themeStyles.textPrimary');
				}

				.modal-close {
					font-size: 20px;
					color: v-bind('themeStyles.textTertiary');
					cursor: pointer;
					padding: 4px;
					border-radius: 50%;
					transition: all 0.2s;

					&:active {
						background-color: v-bind('themeStyles.bgSecondary');
						color: v-bind('themeStyles.textSecondary');
					}
				}
			}

			.modal-body {
				padding: 20px;
				overflow-y: auto;
				max-height: calc(80vh - 120px);

				.risk-level-item {
					padding: 20rpx;
					margin-bottom: 16rpx;
					background: v-bind('themeStyles.bgSecondary');
					border-radius: 16rpx;
					border: 1rpx solid v-bind('themeStyles.borderLight');
					transition: all 0.2s;

					&:last-child {
						margin-bottom: 0;
					}

					&:active {
						background-color: v-bind('themeStyles.bgTertiary');
						box-shadow: v-bind('themeStyles.cardBoxShadow');
					}

					.level-info {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.level-dot {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background-color: currentColor;
							margin-right: 16rpx;
							box-shadow: 0 0 0 4rpx v-bind('themeStyles.accentBg');
						}

						.level-text {
							font-size: 28rpx;
							font-weight: 700;
						}
					}

					.level-advice {
						font-size: 26rpx;
						color: v-bind('themeStyles.textSecondary');
						margin-bottom: 12rpx;
						display: block;
						line-height: 1.5;
					}

					.level-criteria {
						font-size: 24rpx;
						color: v-bind('themeStyles.textTertiary');
						display: block;
						background-color: v-bind('themeStyles.accentBg');
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						border-left: 4rpx solid v-bind('themeStyles.primaryColor');
					}
				}
			}
		}

		/* 提示弹窗样式 */
		.tip-popup {
			background: v-bind('themeStyles.bgCard');
			border-radius: 16px;
			padding: 24px;
			width: 300px;
			text-align: center;
			box-shadow: v-bind('themeStyles.cardBoxShadow');
			border: 1px solid v-bind('themeStyles.borderLight');

			.popup-icon {
				display: block;
				font-size: 36px;
				margin-bottom: 16px;
			}

			.popup-content {
				display: block;
				font-size: 16px;
				color: v-bind('themeStyles.textSecondary');
				line-height: 1.6;
				margin-bottom: 20px;
				text-align: left;
			}

			.popup-title {
				display: block;
				font-size: 20px;
				font-weight: bold;
				color: v-bind('themeStyles.textPrimary');
				margin: 16px 0 20px 0;
			}

			.popup-btn {
				background: v-bind('themeStyles.primaryGradient');
				color: white;
				border: none;
				border-radius: 8px;
				padding: 12px 24px;
				font-size: 16px;
				font-weight: 600;
				cursor: pointer;
				touch-action: manipulation;
				transition: all 0.2s;

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}
			}
		}

		/* 客流转化分析弹窗样式 */
		.conversion-popup {
			background: v-bind('themeStyles.bgCard');
			border-radius: 16px;
			padding: 24px;
			width: 300px;
			text-align: center;
			box-shadow: v-bind('themeStyles.cardBoxShadow');
			border: 1px solid v-bind('themeStyles.borderLight');

			.popup-icon {
				display: block;
				font-size: 36px;
				margin-bottom: 16px;
			}

			.popup-title {
				display: block;
				font-size: 20px;
				font-weight: bold;
				color: v-bind('themeStyles.textPrimary');
				margin: 16px 0 20px 0;
			}

			.conversion-funnel {
				width: 100%;
				padding: 30rpx 0;

				.funnel-step {
					min-width: 300rpx;
					background-color: v-bind('themeStyles.bgSecondary');
					border-radius: 16rpx;
					padding: 24rpx;
					margin: 0 auto;
					transition: all 0.3s ease;
					border: 1rpx solid v-bind('themeStyles.borderLight');
					border-left: 6rpx solid v-bind('themeStyles.successColor');
					margin-bottom: 10rpx;
					box-shadow: v-bind('themeStyles.shadowSm');

					&.highlight {
						background-color: v-bind('themeStyles.accentBg');
						border-left-color: v-bind('themeStyles.primaryColor');
						box-shadow: v-bind('themeStyles.cardBoxShadow');
					}

					.funnel-label {
						display: block;
						font-size: 16px;
						font-weight: 500;
						color: v-bind('themeStyles.textPrimary');
						margin-bottom: 8rpx;
					}

					.funnel-value {
						display: block;
						font-size: 24px;
						font-weight: bold;
						background: v-bind('themeStyles.primaryGradient');
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						margin: 12rpx 0;
					}

					.funnel-note {
						display: block;
						font-size: 14px;
						color: v-bind('themeStyles.textSecondary');
						font-weight: normal;
					}
				}

				.funnel-arrow {
					font-size: 24px;
					color: v-bind('themeStyles.textTertiary');
					margin: 10rpx 0;
				}
			}
		}
	}
</style>